<template>
  <div class="full">
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">治安监控</div>
      </div>
    </div>
    <div class="cht1">
      <v-chart id="chart1" ref="chart1" class="chart1" :option="option1" />
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">垃圾分类监控</div>
      </div>
    </div>
    <div class="cht11">
      <v-chart id="chart11" ref="chart11" class="chart11" :option="option11" />
    </div>

    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">河道监控</div>
      </div>
    </div>
    <div class="flex-container-el">
      <el-table
        :data="tableData"
        class="transparent-table"
        height="260"
        header-row-style="background-color: #1a519e60"
      >
        <el-table-column v-slot="{ row }" label="序号" width="60">
          <div class="eltableXH">
            {{ row.index }}
          </div>
        </el-table-column>
        <el-table-column label="监控安装位置">
          <template #default="{ row }">
            <el-button class="eltablexq" type="text">{{
              row.type
            }}</el-button></template
          >
        </el-table-column>
        <el-table-column label="工况/感应" width="150">
          <template #default="{ row }">
            <el-tag :type="row.status === '正常' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script >
// var chartDom = document.getElementById("main");postall
// var myChart = echarts.init(chartDom);
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";

export default {
  data() {
    return {
      option1: {},
      option11: {},
      tableData: [
        { index: 1, type: "类型1", status: "正常", name: "17" },
        { index: 2, type: "类型2", status: "离线", name: "16" },
        { index: 3, type: "类型3", status: "正常", name: "15" },
        { index: 4, type: "类型4", status: "正常", name: "11" },
        { index: 5, type: "类型5", status: "正常", name: "41" },
        { index: 6, type: "类型6", status: "正常", name: "41" },
        // 其他数据
      ],
    };
  },
  setup() {},
  mounted() {
    this.option1 = {
      // 根据需要配置echarts的option
      backgroundColor: "transparent",
      //   color: ["#c73232", "#8f2323"],
      legend: {
        top: "15%",
        left: "1%",
        orient: "vertical",
        textStyle: {
          color: "#ffffff",
          fontSize: 16, // 设置图例文字大小
        },
      },
      tooltip: {
        trigger: "item",
        textStyle: {
          fontSize: 16, // 设置图例文字大小
        },
      },
      series: [
        {
          name: "治安监控",
          type: "pie",
          // roseType: "radius",
          data: [
            { value: 15, name: 123 },
            { value: 20, name: 222 },
          ],
          label: {
            color: "#ffffff",
            // alignTo: "edge",
            formatter: function (params) {
              var percent = ((params.value / 35) * 100).toFixed(0);
              return percent + "%";
            },
            // minMargin: 50,
            edgeDistance: 10,
            lineHeight: 18,
            fontSize: 16,
            rich: {
              time: {},
            },
          },
          labelLine: {
            length: 10,
            length2: 20,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.option11 = {
      // 根据需要配置echarts的option
      backgroundColor: "transparent",
      color: ["#FD0505", "#FFA40F"],
      legend: {
        top: "15%",
        left: "1%",
        orient: "vertical",
        textStyle: {
          color: "#ffffff",
          fontSize: 16, // 设置图例文字大小
        },
      },
      tooltip: {
        trigger: "item",
        textStyle: {
          fontSize: 16, // 设置图例文字大小
        },
      },
      series: [
        {
          name: "治安监控",
          type: "pie",
          // roseType: "radius",
          data: [
            { value: 15, name: 123 },
            { value: 20, name: 222 },
          ],
          label: {
            color: "#ffffff",
            // alignTo: "edge",
            formatter: function (params) {
              var percent = ((params.value / 35) * 100).toFixed(0);
              return percent + "%";
            },
            // minMargin: 50,
            edgeDistance: 10,
            lineHeight: 18,
            fontSize: 16,
            rich: {
              time: {},
            },
          },
          labelLine: {
            length: 10,
            length2: 20,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.renderChart(); // 渲染图表
  },
  methods: {
    renderChart() {
      const myChart1 = echarts.init(document.getElementById("chart1"), "dark"); // 初始化echarts图表
      myChart1.setOption(this.option1); // 设置图表的配置项
      const mychart11 = echarts.init(
        document.getElementById("chart11"),
        "dark"
      ); // 初始化echarts图表
      mychart11.setOption(this.option11); // 设置图表的配置项
    },
  },
};
</script>
<style scoped>
.full {
  display: flex;
  flex-direction: column;
  width: 25rem;
  /* background-color: #e62f29; */
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.full-secondtitle {
  display: flex;
  align-items: center;
  background-color: #ffffff70;
  padding: 0.3rem 1rem;
}
.full-secondtitle .h1 {
  line-height: 1;
  font-size: 1.4rem;

  font-weight: 600;
  color: #ffffff;
}
.cht1 {
  width: 25rem;
  height: 12.5rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.cht11 {
  width: 25rem;
  height: 15rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.chart1 {
  width: 25rem;
  height: 12.5rem;
}

.chart11 {
  width: 25rem;
  height: 15rem;
}
.flex-container-el {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
::v-deep .el-table .el-table__cell {
  padding: 3px 0;
}
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #ffffff;
  --el-table-header-text-color: #ffffff;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}
.el-tag {
  background-color: transparent;
  font-size: 1rem;
  border-radius: 0.3rem;
}
.eltableXH {
  font-size: 0.7rem;

  font-weight: 400;
  color: #ffffff;
  width: 1.375rem;
  height: 1rem;
  background-image: url("../assets/序号.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
.eltablexq {
  color: #ffffff;
}
/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover > td {
  background: rgba(0, 255, 255, 0.217) !important;
}
/* 修改表头样式-加边框 */
::v-deep .el-table__header-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.575);
}
/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
  text-align: center;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>